<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑轮播</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<form class="layui-form" style="width: 80%;" id="aaf">
    <input type="hidden" name="id" th:value="${carousel.id}"/>
    <div class="layui-form-item">
        <label class="layui-form-label">描述信息</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input"
                   lay-verify="required" placeholder="请输入描述信息" name="remark" th:value="${carousel.remark}">
        </div>
    </div>

    <!--轮播图片  -->
    <div class="layui-form-item">
        <label class="layui-form-label">封面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="onePicUpload"><i class="layui-icon"></i>上传文件</button><br />
            <img class="layui-upload-img" id="preview" style="width: 150px;margin-top: 5px"
                 th:src="@{${carousel.imgurl}}">
            <p id="uploadError"></p>
            <!--隐藏域存储图片地址-->
            <input type="hidden" lay-verify="imgurl" name="imgurl" id="newsImg" th:value="${carousel.imgurl}"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
            <input type="text" name="imglink" class="layui-input"
                   lay-verify="url" placeholder="链接地址" th:value="${carousel.imglink}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="text" name="sorting" class="layui-input"
                   lay-verify="number" placeholder="排序" th:value="${carousel.sorting}">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否展示</label>
        <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="是" th:checked="${carousel.status==1}">
                <input type="radio" name="status" value="0" title="否" th:checked="${carousel.status==0}">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="editCarousel">立即提交</button>
        </div>
    </div>
</form>

<script th:src="@{/src/layui.js}"></script>
<script>
    layui.use(['upload','form','jquery','layer'],function () {
        var upload = layui.upload,
            $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

            form.verify({
                imgurl:function (value) {
                    if(value.length == 0){
                        return "请上传图片";
                    }
                }
            })

        upload.render({
            elem:'#onePicUpload',
            url:'/carousel/upload',
            before:function (obj) {
                obj.preview(function (index,file,result) {
                    //显示预览图片
                    $("#preview").attr("src",result);
                })
            },
            done:function (res) {
                if(res.code==200){
                    //将服务器端返回的图片路径存储在隐藏域中
                    $("#newsImg").val(res.data.src);
                    layer.msg("上传成功",{icon:1},function () {

                    })
                }else{
                    layer.msg("上传失败",{icon:5});
                }
            }
        })

        form.on('submit(editCarousel)',function (data) {
            $.ajax({
                url:'/carousel/updateCarousel',
                type:'put',
                dataType:'json',
                data:data.field,
                success:function (res) {
                    if(res.code==200){
                        layer.msg('编辑成功',{icon:1},function () {
                            parent.layer.closeAll("iframe");
                            parent.location.reload();
                        })
                    }else{
                        layer.msg('编辑失败',{icon:5});
                    }
                }
            })

            return false;
        })



    })
</script>

</body>
</html>